<template>
  <div class="laout">
    <van-tabbar v-model="activeIndex" route active-color="rgb(33 185 122)" inactive-color="#000">
      <van-tabbar-item to="/home/">
        <span>首页</span>
        <template #icon="props">
          <i class="iconfont icon-ind"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/home/list">
        <span>找房</span>
        <template #icon="props">
          <i class="iconfont icon-findHouse"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/home/news">
        <span>资讯</span>
        <template #icon="props">
          <i class="iconfont icon-infom"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/home/profile">
        <span>我的</span>
        <template #icon="props">
          <i class="iconfont icon-my"></i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <router-view/>
  </div>
</template>
<script>
export default {
  data() {
    let active = 0;
    console.log(this.$route.path);
    switch (this.$route.path) {
      case "/home":
        active = 0;
        break;
      case "/home/list":
        active = 1;
        break;
      case "/home/news":
        active = 2;
        break;
      case "/home/profile":
        active = 3;
        break;
    }
    return {
      activeIndex: active
    };
  }
};
</script>
<style lang="less" scoped>
.laout {
  height: 100%;
}
</style>

